<template>
	<view>

		<!-- <block v-if="merchantId"> -->
		<view class="bg">

		</view>
		<view class="frame-two" v-if="helpDetailObject">
			<view class="padding_20rpx_0 p-bo ">
				<view class="display-a" >
					<view class="frame-left"></view>
					<view class="font-weight_bold font-size_32rpx" >
					
						{{helpDetailObject.heading?helpDetailObject.heading:'功能介绍'}}
					
					</view>
				</view>
				<view  class="releaseTime">
					发布时间:{{helpDetailObject.createTime}}
				</view>
			</view>

			<video :src="palyVideo" :poster="palyVideo+'?vframe/jpg/offset/1'"></video>
			<block >
				<!-- <view class="display-a margin-bottom_30rpx">
					<view class="drop"></view>
					<view class="font-weight_bold font-size_32rpx">PC管理地址</view>
				</view>
				<view class="display-a-js">
					<view class="link font-overflow">{{topObj.url}}</view>
					<view class="copy" @click="getCopy()">复制</view>
				</view> -->
				<!-- <view class="tips">为了让您更好体验功能，请复制以上链接到PC端进行管理</view> -->
			</block>
			<view v-if="helpDetailObject.content">
				<rich-parser :html="helpDetailObject.content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" lazy-load
					ref="article" selectable show-with-animation use-anchor>
				</rich-parser>
			</view>

		</view>

		<view style="height: 110rpx;"></view>

	</view>

	<!-- </block>
		<block v-else>
			
		</block> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateSta: '',

				type: '',

				id: '',

				topObj: {},

				html: '',
				palyVideo: '',

				merchantId: '',
				helpDetailObject: null
			}
		},

		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},

		onLoad(options) {
			this.dateSta = this.getDate("end");
			if (options.type) {
				//1矩阵发布  2数字人剪辑  3现场大屏
				//4视频剪辑  5云闪推  6抖支付
				//7抖支付  8更新通知
				this.type = options.type;

			}
			if (options.id) {
				this.id = options.id;
				this.detail();
			}
		},

		onShow() {
			if (uni.getStorageSync('merchantId')) {
				this.merchantId = uni.getStorageSync('merchantId');
				this.getCount();
			}
		},

		methods: {

			navi(type) {
				if (type == 1) {
					uni.switchTab({
						url: '/pages/index/home'
					})
				}
				if (type == 2) {
					uni.switchTab({
						url: '/pages/index/center'
					})
				}
				if (type == 3) {
					uni.switchTab({
						url: '/pages/index/help'
					})
				}
			},

			refresh() {
				if (!uni.getStorageSync('merchantId')) {
					uni.showModal({
						title: '登录提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/index/login?type=' + this.type + '&id=' + this.id
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				} else {
					this.merchantId = uni.getStorageSync('merchantId');
					this.getCount();
				}
			},

			// 复制登录地址
			getCopy() {
				uni.setClipboardData({
					data: this.topObj.url,
					success: () => {
						// 复制成功的回调
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
					},
					fail: () => {
						// 复制失败的回调
						uni.showToast({
							title: '链接复制失败',
							icon: 'error'
						});
					}
				});
			},

			//数据
			async getCount() {
				const result = await this.$http.get({
					url: this.$api.mCount,
					data: {
						types: this.type,
						merchantId: uni.getStorageSync('merchantId'),
						createTime: this.dateSta
					}
				});
				if (result.code == 2000) {
					this.topObj = result.data;
				} else {
					this.$sun.toast(result.msg, 'none');
				}
			},

			//首页数据
			async detail() {
				console.log(this.id)
				const result = await this.$http.post({
					url: this.$api.shelpDetail,
					data: {
						id: this.id
					}
				});
				if (result.code == 2000) {
					this.helpDetailObject = result.data
				} else {
					this.$sun.toast(res.msg)
				}


				// if (result.code == 2000) {
				// 	if (this.type == 1) {
				// 		this.$sun.title("矩阵发布");
				// 		this.html = result.data.matrixDetails;
				// 		this.palyVideo = result.data.matrixVideo;
				// 	}
				// 	if (this.type == 2) {
				// 		this.$sun.title("数字人剪辑");
				// 		this.html = result.data.szrDetails;
				// 		this.palyVideo = result.data.szrVideo;
				// 	}
				// 	if (this.type == 3) {
				// 		this.$sun.title("现场大屏");
				// 		this.html = result.data.largeDetails;
				// 		this.palyVideo = result.data.largeVideo;
				// 	}
				// 	if (this.type == 4) {
				// 		this.$sun.title("视频剪辑");
				// 		this.html = result.data.clipDetails;
				// 		this.palyVideo = result.data.clipVideo;
				// 	}
				// 	if (this.type == 5) {
				// 		this.$sun.title("云闪推");
				// 		this.html = result.data.pushDetails;
				// 		this.palyVideo = result.data.pushVideo;
				// 	}
				// 	if (this.type == 6) {
				// 		this.$sun.title("抖支付");
				// 		this.html = result.data.doypagDetails;
				// 		this.palyVideo = result.data.doypayVideo;
				// 	}
				// } else {
				// 	this.$sun.toast(result.msg, 'none');
				// }
			},

			/*  日期选择  */
			bindDateChange(e) {
				this.dateSta = e.target.value;
				this.getCount();
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 100;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
				// return `${year}-${month}`;
			},

		}
	}
</script>

<style lang="scss">
	.tab-frame {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 250rpx;
	}

	.tab-tilte {
		font-size: 20rpx;
		color: rgb(217, 217, 217);
	}

	.tab-11 {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 6rpx;
	}

	.fiex-bott {
		background-color: #FFFFFF;
		padding: 8rpx 0;
		bottom: 0;
		display: flex;
		position: fixed;
		align-items: center;
	}

	.refresh {
		width: 120rpx;
		text-align: center;
		margin-left: auto;
		border: 1px solid #FFFFFF;
		border-radius: 10rpx;
		font-size: 26rpx;
		padding: 8rpx 14rpx;
	}

	.copy {
		color: #1E6CEB;
		font-size: 30rpx;
	}

	.link {
		color: #666666;
		width: 570rpx;

	}

	.tips {
		color: #0C91F3;
		font-size: 24rpx;
		margin: 20rpx 0 40rpx;
	}

	.drop {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #0C91F3;
		margin-right: 10rpx;
	}

	video {
		width: 670rpx;
		height: 384rpx;
		border-radius: 20rpx;
		margin: 30rpx 0;
	}

	.frame-left {
		width: 6rpx;
		height: 28rpx;
		background-color: #0C91F3;
		border-radius: 10rpx;
		margin-right: 16rpx;
	}
	.releaseTime{
		margin:10rpx 0 0 16rpx;
		color: #999;
		
	}

	.frame-two {
		width: 710rpx;
		background-color: #FFFFFF;
		margin: -260rpx 20rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.frame {
		width: 710rpx;
		background-color: #FFFFFF;
		margin: -80rpx 20rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.data-name {
		color: rgba(255, 255, 255, 0.60);
		font-size: 26rpx;
	}

	.data-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}

	.data-bor {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.data-line {
		width: 2rpx;
		background-color: rgba(255, 255, 255, 0.16);
		height: 120rpx;
	}

	.data-center-two {
		width: 170rpx;
		text-align: center;
	}

	.data-center {
		width: 228rpx;
		text-align: center;
	}

	.sel-date {
		width: 200rpx;
		font-size: 32rpx;
	}

	.img-124 {
		width: 24rpx;
		height: 24rpx;
		margin-top: 4rpx;
	}

	.bg {
		background: linear-gradient(180deg, #54B5FF 0%, #2998ED 100%);
		width: 750rpx;
		height: 358rpx;
	}

	page {
		padding-bottom: 20rpx;
	}
</style>